<template>
  <pro-layout
    :title="title"
    :menus="menus"
    :collapsed="collapsed"
    :mediaQuery="query"
    :isMobile="isMobile"
    :handleMediaQuery="handleMediaQuery"
    :handleCollapse="handleCollapse"
    :logo="logoRender"
    :i18nRender="i18nRender"
    v-bind="settings">
    <setting-drawer :settings="settings" @change="handleSettingChange" />

    <template v-slot:rightContentRender>
      <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
    </template>
    <template>
      <multi-tab></multi-tab>
    </template>
    <template v-slot:footerRender>
      <global-footer />
    </template>
    <router-view />
  </pro-layout>
</template>
<script>
  import { SettingDrawer, updateTheme } from '@ant-design-vue/pro-layout'
  import { i18nRender } from '@/locales'
  import { mapState } from 'vuex'
  import { SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'

  import defaultSettings from '@/config/defaultSettings'
  import RightContent from '@/components/GlobalHeader/RightContent'
  import MultiTab from '@/components/MultiTab'
  import LogoSvg from '../assets/logo.svg?inline'

  import FooterToolBar from '@/components/FooterToolbar'

  export default {
    name: 'BlankLayout',
    components: {
      SettingDrawer,
      RightContent,
      MultiTab,
      FooterToolBar,
    },
    data () {
      return {
        // base
        menus: [],
        // 侧栏收起状态
        collapsed: true,
        title: defaultSettings.title,
        settings: {
          // 布局类型
          layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
          // 定宽: true / 流式: false
          contentWidth: defaultSettings.layout === 'sidemenu' ? false : defaultSettings.contentWidth === 'Fixed',
          // 主题 'dark' | 'light'
          theme: defaultSettings.navTheme,
          // 主色调
          primaryColor: defaultSettings.primaryColor,
          fixedHeader: defaultSettings.fixedHeader,
          fixSiderbar: defaultSettings.fixSiderbar,
          colorWeak: defaultSettings.colorWeak,

          hideHintAlert: false,
          hideCopyButton: false
        },
        // 媒体查询
        query: {},

        // 是否手机模式
        isMobile: false
      }
    },
    computed: {
      ...mapState({
        // 动态主路由
        mainMenu: state => state.permission.addRouters
      })
    },
    created () {
      const routes = this.mainMenu.find(item => item.path === '/')
      this.menus = (routes && routes.children) || []
      // 处理侧栏收起状态
      this.$watch('collapsed', () => {
        this.$store.commit(SIDEBAR_TYPE, this.collapsed)
      })
      this.$watch('isMobile', () => {
        this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
      })
    },
    mounted () {
      const userAgent = navigator.userAgent
      if (userAgent.indexOf('Edge') > -1) {
        this.$nextTick(() => {
          this.collapsed = !this.collapsed
          setTimeout(() => {
            this.collapsed = !this.collapsed
          }, 16)
        })
      }

      // first update color
      updateTheme(this.settings.primaryColor)
    },
    methods: {
      i18nRender,
      handleMediaQuery (val) {
        this.query = val
        if (this.isMobile && !val['screen-xs']) {
          this.isMobile = false
          return
        }
        if (!this.isMobile && val['screen-xs']) {
          this.isMobile = true
          this.collapsed = false
          this.settings.contentWidth = false
          // this.settings.fixSiderbar = false
        }
      },
      handleCollapse (val) {
        this.collapsed = val
      },
      handleSettingChange ({ type, value }) {
        console.log('type', type, value)
        type && (this.settings[type] = value)
        switch (type) {
          case 'contentWidth':
            this.settings[type] = value === 'Fixed'
            break
          case 'layout':
            if (value === 'sidemenu') {
              this.settings.contentWidth = false
            } else {
              this.settings.fixSiderbar = false
              this.settings.contentWidth = true
            }
            break
        }
      },
      logoRender () {
        return <LogoSvg />
      }
    }
  }
</script>
<style lang="less">
  @import "./BasicLayout.less";


  /deep/ .ant-btn{
    border-radius: 5px;
  }
  /deep/ .ant-calendar-picker-input.ant-input{
    width: 200px;
  }
  /deep/ .ant-input{
    width: 70%;
    border-radius: 5px;
  }
  /deep/ .ant-calendar-picker{
    width: 200px;
    border-radius: 5px;
  }
  /deep/ .ant-card.ant-card-bordered{
    border-radius: 5px;
  }
  .ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .tabs-style{
    position: fixed;
    top: 25px;
    left: 340px;
    color: #387FC6 ;
    background: rgb(255, 255, 255);
    letter-spacing: 3px;
    height: 35px;
    padding: 8px 22px;
    border-top-left-radius:3px;
    border-top-right-radius: 3px;
  }
  .center-info{
    position: fixed;
    top: 20px;
    right: 140px;
  }



  .ant-pro-multi-tab .ant-pro-multi-tab-wrapper  /deep/  .ant-tabs{
    overflow: auto;

  }
  .ant-tabs.ant-tabs-card .ant-tabs-card-bar /deep/ .ant-tabs-tab{
    margin-right: 10px;
  }

</style>





